<template>
    <div>
      <div>
        显示数据
        {{ username }} {{ password }}
      </div>
      <div>
        用户名<input type="text" v-model="username">
      </div>
      <div>
        密码<input type="password" v-model="formData.password">
      </div>
  
      <div>
        <button @click="login">登录</button>
      </div>
    </div>
  </template>
  <script setup>
  // 表单绑定 v-model只能使用在表单元素上
  // 什么是双向数据绑定 视图更新之后数据会随之改变  数据发生变化视图更新
  import {ref} from 'vue'
  let username = ref('')
  let password = ref('')
  
  let formData = ref({
    username:'',
    password:'',
    gender:'',
    age:''
  })
  
  const login = ()=>{
    console.log(username.value,password.value,'实现登录');
  }
  </script>
  <style scoped>
  </style>